<template>
<div>
  <div>
    <h1>弹窗：点击“编辑”测试弹窗</h1>
  </div>
  <el-table
    class="table"
    :data="tableData"
    style="width: 100%;margin-top: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children'}"
  >
    <el-table-column prop="name" label="名称" width="180"></el-table-column>
    <el-table-column prop="url" label="地址" width="180"></el-table-column>
    <el-table-column prop="sort" label="排序"></el-table-column>
    <el-table-column prop="icon" label="图标名称"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 编辑弹窗 -->
  <el-dialog title="编辑" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="名称" label-width="120px">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="排序" label-width="120px">
        <el-select v-model="form.sort" placeholder="请选择排序（1-20，正序）">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</div>

</template>

<script>

export default {
  name: 'Dialog',
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        id: '',
        name: '',
        pid: '',
        sort: '',
        url: '',
        icon: '',
      },
    }
  }
  ,created() {
    // 请求数据
    this.getData();
  }
  ,methods: {
    // 请求数据
    async getData(){
      let res = await this.$http.get("/menu/node");
      if(res.code === 1){
        this.tableData = res.data;
      }
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      Object.assign(this.form, row );
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row);
    }
  }

}

</script>

<style lang="less">

</style>
